<template>
  <div class="wrapper" :id="wrapperId">
    <div class="wrapper-content" :id="wrapperContentId">
      <div class="scroll-area">
        <div class="tip downTip" v-if="downStatus==='1'" v-html="downMsg"></div>
        <div class="tip downTip" v-if="downStatus==='2'" v-html="downMsg"></div>
        <div class="tip downTip downLoading" v-if="downStatus==='3'">
            <loading :color="'#fff'" />
            <span v-html="downMsg"></span>
        </div>
        <div class="tip downTip" v-if="downStatus==='4'" v-html="downMsg"></div>
        <slot name="content"></slot>
        <div class="upTip" v-html="noMore.text" v-if="noMore.status"></div>
        <div class="upTip" v-html="upMsg" v-else></div>
      </div>
    </div>
    <div class="top" :class="topClass" @click="topClick">Up</div>
  </div>
</template>

<script>
import BetterUtilTools from 'better-util-tools';
import { onMounted,ref } from 'vue';
import loading from './loading/index.vue';
import bsInit from './index';

const UtilTools = new BetterUtilTools();
export default {
    'components': {
        loading
    },
    'props':{
        'noMore':{
            'required':true,
            'type':Object,
            'default':()=>({
                'status':false,
                'text':'- 暂无更多数据 -'
            })
        }
    },
    setup(props, ctx) {
        const wrapperId = `zlgb${UtilTools.randomName(true,8,20)}`;
        const wrapperContentId =`zlgb${UtilTools.randomName(true,8,20)}`;
        const {
            initBs, pullDownRefresh, downStatus, upStatus, downMsg, upMsg
        } = bsInit;

        let bs = null;
        const topClass = ref('topHide');
        let time = ref(UtilTools.formatDateTime({'date':new Date(),'type':'YYYY-MM-DD hh:mm:ss'}));
        const downRefresh = () => {
            downStatus.value = '4';
            setTimeout(() => {
                bs.finishPullDown();
                bs.refresh();
                setTimeout(()=>{
                    downStatus.value = '1';
                },200);
            }, 200);
        };

        const upRefresh = () => {
            upStatus.value = '3';
            setTimeout(() => {
                bs.finishPullUp();
                bs.refresh();
                setTimeout(()=>{
                    upStatus.value = '1';
                },200);
            }, 200);
        };

        onMounted(() => {
            const height = UtilTools.getStyle(document.querySelector(`#${wrapperId}`), 'height');
            document.querySelector(`#${wrapperContentId}`).style.height = `${Number(height.replace(/px/g, '')) + 1}px`;
            bs = initBs(`#${wrapperContentId}`,{'click':true});
            bs.on('pullingDown', () => {
                downStatus.value = '3';
                time.value = UtilTools.formatDateTime({'date':new Date(),'type':'YYYY-MM-DD hh:mm:ss'});
                ctx.emit('downCb');
            });
            bs.on('pullingUp', () => {
                upStatus.value = '2';
                ctx.emit('upCb');
            });
            bs.on('scroll', arg => {
                if ( downStatus.value < 3){
                    if (arg.y > pullDownRefresh.threshold) {
                        downStatus.value = '2';
                    }
                    if (arg.y < pullDownRefresh.threshold) {
                        downStatus.value = '1';
                    }
                }
                if (Math.abs(arg.y) > 2*Number(height.replace(/px/g, ''))){
                    topClass.value='topShow';
                } else {
                    topClass.value='topHide';
                }
            });
        });
        const topClick = (speed=1000)=>{
            bs.scrollTo(0,0,speed);
            bs.refresh();
        };
        return {
            wrapperId,
            wrapperContentId,
            downMsg,
            upMsg,
            downStatus,
            upStatus,
            downRefresh,
            upRefresh,
            topClick,
            time,
            topClass
        };
    }
};
</script>

<style lang="less" scoped>
.wrapper {
  height: 100%;
  width: 100%;
  position: relative;
  .scroll-area {
    .tip {
      width: 100%;
      position: absolute;
      line-height: 50px;
      height: 50px;
      text-align: center;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(51, 51, 51, 0.596);
      font-size: 15px;
      font-weight: 400;
      &.downTip {
        top: -50px;
        span{
          margin-left: 14px;
        }
      }

    }
    .upTip {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
      font-size: 15px;
      font-weight: 400;
      color: rgba(51, 51, 51, 0.596);
    }
  }
  .top{
    position: absolute;
    bottom: 25px;
    right: 25px;
    width: 36px;
    height: 36px;
    border-radius:50%;
    font-size: 14px;
    background: #555;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    z-index: 999;
    transition: all 1s;
    &.topHide{
      opacity: 0;
    }
    &.topShow{
      opacity: 1;
    }
  }
}
</style>